<style lang="scss">
  @import "~@/styles/base";

  .page-light {
    .offline-tip {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: rpx(90);
      line-height: rpx(90);
      background-color: $light-black;
      color: #fff;
      z-index: 100;
      text-align: center;
      font-size: rpx(30);
    }
    .number-wrap {
      position: relative;
      height: rpx(734);
      background-color: #fff;
      padding: rpx(10);
      border-radius: rpx(10);
      margin-bottom: rpx(17);
      .bright-canvas-wrap {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: rpx(35);
        width: rpx(522);
        height: rpx(522);
        .canvas-bg {
          @include middle-center-x();
          top: rpx(40);
          width: rpx(445);
          height: rpx(410);
        }
        .bright-canvas {
          position: absolute;
          left: 0;
          top: 0;
          width: rpx(522);
          height: rpx(522);
          z-index: 100;
          .logo {
            @include middle-center-x();
            top: rpx(156);
            width: rpx(146);
            height: rpx(31);
          }
          .number {
            @include middle-center-x();
            top: rpx(197);
            font-size: rpx(110);
            color: #404953;
            letter-spacing: rpx(4);
          }
          .unit {
            position: absolute;
            right: rpx(162);
            top: rpx(217);
            font-size: rpx(26);
            color: #404953;
          }
          .power, .switch-type {
            position: absolute;
            bottom: rpx(40);
            width: rpx(76);
            height: rpx(76);
          }
          .power {
            left: rpx(160);
          }
          .switch-type {
            right: rpx(160);
          }
          .count-down {
            @include middle-center-x();
            top: rpx(328);
            font-size: rpx(20);
            color: $light-black;
            line-height: rpx(31);
            text-align: center;
            .time {
              color: $main-color;
            }
          }
        }
        .power-text, .switch-type-text {
          position: absolute;
          bottom: rpx(20);
          font-size: rpx(20);
          color: $light-black;
        }
        .power-text {
          left: rpx(175);
        }
        .switch-type-text {
          right: rpx(145);
        }

      }
      .operation-wrap {
        @include middle-center-x();
        bottom: rpx(45);
        .operation-list {
          display: flex;
          width: rpx(450);
          border-radius: rpx(40);
          border: rpx(1) solid $light-black;
          .operation {
            position: relative;
            flex: 1;
            height: rpx(80);
            &:first-child {
              border-right: rpx(1) solid $light-black;
            }
            img {
              @include middle-center();
              width: rpx(44);
              height: rpx(24);
            }
          }
        }
        .text-list {
          display: flex;
          width: rpx(450);
          padding-top: rpx(20);
          .text {
            flex: 1;
            font-size: rpx(20);
            text-align: center;
            color: $light-black;
          }
        }
      }
    }
    .mode-list-wrap {
      position: relative;
      .mode-list {
        display: flex;
        background-color: $main-color;
        border-radius: rpx(10);
        .mode {
          padding-top: rpx(20);
          flex: 1;
          height: rpx(150);
          color: #84beff;
          font-size: rpx(22);
          text-align: center;
          img {
            display: block;
            margin: 0 auto rpx(12);
            width: rpx(56);
            height: rpx(56);
          }
          &.active {
            color: #fff;
          }
        }
      }
      .btn-more {
        position: absolute;
        right: rpx(70);
        top: rpx(157);
        width: rpx(90);
        height: rpx(27);
        text-align: center;
        box-shadow: 0 rpx(3) rpx(9) rgba(0, 0, 0, 0.09);
        border-radius: rpx(14);
        img {
          @include middle-center();
          width: rpx(15);
          height: rpx(8);
        }
      }
      .sub-mode-bg {
        display: block;
        margin: rpx(43) auto;
        width: rpx(566);
        height: rpx(127);
      }
      .sub-mode-list {
        @include middle-center-x();
        top: rpx(200);
        display: flex;
        width: rpx(550);
        background-color: transparent;
        border-radius: rpx(10);
        .mode {
          flex: 1;
          padding-top: rpx(15);
          height: rpx(100);
          color: #b2bcc6;
          font-size: rpx(20);
          text-align: center;
          img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: rpx(56);
            height: rpx(56);
          }
          &.active {
            color: $main-color;
          }
        }
      }
    }
  }
</style>
<template>
  <div class="page page-light">
    <div class="offline-tip" v-if="!currentDevice || !currentDevice.is_online">当前台灯不在线，请检查网络设置</div>
    <div class="number-wrap">
      <div class="bright-canvas-wrap">
        <img class="canvas-bg" src="/static/img/light/brightness_img.png">
        <canvas class="bright-canvas" canvas-id="brightnessCanvas">
          <cover-image class="logo" src="/static/img/light/logo_img.png"></cover-image>
          <!--<cover-image class="switcher-btn" src="/static/img/light/switcher_btn.png"></cover-image>-->
          <cover-view class="number">58</cover-view>
          <cover-view class="unit">%</cover-view>
          <cover-view class="count-down">
            休息倒计时
            <cover-view class="time">10:11:10</cover-view>
          </cover-view>
          <cover-image class="power" @click="changePower"
                       :src="attrs.powerOn ? '/static/img/light/power_on_btn.png' : '/static/img/light/power_off_btn.png'"></cover-image>
          <cover-image class="switch-type"
                       :src="numberType === 0 ? '/static/img/light/brightness_btn.png':'/static/img/light/temp_btn.png'"></cover-image>
        </canvas>
        <div class="power-text">开关</div>
        <div class="switch-type-text">亮度/色温</div>
      </div>
      <div class="operation-wrap">
        <ul class="operation-list">
          <li class="operation" @click="toUp">
            <img src="/static/img/light/up_ic.png">
          </li>
          <li class="operation" @click="toDown">
            <img src="/static/img/light/down_ic.png">
          </li>
        </ul>
        <ul class="text-list">
          <li class="text">上升</li>
          <li class="text">下降</li>
        </ul>
      </div>
    </div>
    <div class="mode-list-wrap">
      <ul class="mode-list">
        <li class="mode" @click="updateMode(1)" :class="{active: attrs.mode===1}"><img
          :src="attrs.mode===1 ? '/static/img/light/rw_on_ic.png':'/static/img/light/rw_off_ic.png'">读写模式
        </li>
        <li class="mode" @click="updateMode(0)" :class="{active: attrs.mode===0}"><img
          :src="attrs.mode===0 ? '/static/img/light/pad_on_ic.png':'/static/img/light/pad_off_ic.png'">平板模式
        </li>
        <li class="mode" @click="updateMode(2)" :class="{active: attrs.mode===2}"><img
          :src="attrs.mode===2 ? '/static/img/light/exam_on_ic.png':'/static/img/light/exam_off_ic.png'">考试模式
        </li>
      </ul>
      <div class="btn-more" @click="changeMore"><img
        :src="showMore ? '/static/img/light/arrow_hide_ic.png' : '/static/img/light/arrow_show_ic.png'"></div>
      <img class="sub-mode-bg" v-if="showMore" src="/static/img/light/show_bg.png">
      <ul class="sub-mode-list" v-if="showMore">
        <li class="mode" @click="updateMode(4)" :class="{active: attrs.mode===4}"><img
          :src="attrs.mode===4 ? '/static/img/light/pmlight_select_ic.png':'/static/img/light/pmlight_unselect_ic.png'">夜灯模式
        </li>
        <li class="mode" @click="updateMode(3)" :class="{active: attrs.mode===3}"><img
          :src="attrs.mode===3 ? '/static/img/light/manual_select_ic.png':'/static/img/light/manual_unselect_ic.png'">手工模式
        </li>
        <li class="mode" @click="updateMode(5)" :class="{active: attrs.mode===5}"><img
          :src="attrs.mode===5 ? '/static/img/light/customize_select_ic.png':'/static/img/light/customize_unselect_ic.png'">自定义模式
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showMore: false,
        attrs: {},
        numberType: 0
      };
    },
    computed: {
      currentDevice(){
        return Store.state.device.currentDevice;
      }
    },
    components: {},
    methods: {
      async changePower(){
        await Store.dispatch('updateDeviceAttrs', { powerOn: !this.attrs.powerOn });
        this.attrs = await Store.dispatch("getCurrentAttrs");
      },
      async toUp() {
        if (this.attrs.rising < 256) {
          await Store.dispatch('updateDeviceAttrs', { rising: this.attrs.rising + 1 });
          this.attrs = await Store.dispatch("getCurrentAttrs");
        }
      },
      async toDown() {
        if (this.attrs.falling > 0) {
          await Store.dispatch('updateDeviceAttrs', { falling: this.attrs.falling - 1 });
          this.attrs = await Store.dispatch("getCurrentAttrs");
        }
      },
      drawBrightness(countdown) {
        const ctx = wx.createCanvasContext("brightnessCanvas");
        const scale = App.systemInfo.screenWidth / 750;
        const radius = 442 / 2 * scale;
        const coord = 522 / 2 * scale;
        const width = 20 * scale;
        const angle = 1.5 * Math.PI;
        ctx.beginPath();
        ctx.arc(coord, coord, radius - width / 2, 0.672 * Math.PI, angle);
        ctx.setStrokeStyle("#5ca3f1");
        ctx.setLineWidth(width);
        ctx.stroke();
        ctx.draw();


      },
      async updateMode(mode) {
        await Store.dispatch("updateDeviceAttrs", { mode: mode });
        //this.attrs = await Store.getters.currentAttrs;
      },
      changeMore() {
        this.showMore = !this.showMore;
      }
    },
    async onLoad() {
      this.drawBrightness();
      this.attrs = await Store.dispatch("getCurrentAttrs");
      this.showMore = this.attrs.mode > 2;
    }
  };
</script>
